<template>
  <div>
    <div class="warp">
      <div class="posion">
        <header>
          <van-nav-bar :border="false" left-arrow @click-left="onClickLeft">
          </van-nav-bar>
          <div class="opct"></div>
          <div class="bf"></div>
          <img
            class="header-img"
            :src="`http://localhost:2020/uploads/${form.avatar}`"
            alt=""
          />
        </header>
        <div class="tabbar">
          <ul class="tab-ul">
            <li @click="aShowFun">
              详情
              <b v-if="aShow"></b>
            </li>
            <li @click="bShowFun">
              目录
              <b v-if="bShow"></b>
            </li>
            <li @click="cShowFun">
              评价
              <b v-if="cShow"></b>
            </li>
          </ul>
        </div>
      </div>
      <div class="particulars-warp" v-show="aShow">
        <div class="particulars">
          <div class="particulars-items">
            <div class="freecourse">
              <p>{{ form.name }}</p>
              <p>免费试听</p>
              <div class="setmeal">
                <img
                  src="http://static.wyikao.com/upload/0/yzl/common/2020042317/ec3ee8809b2faafacad22c41a6a32810_png/mobile/large.png"
                  alt=""
                />
                <span>{{ form.typecid }}</span>
                <span>·</span>
                <span>97人在学</span>
              </div>
              <hr />
            </div>
            <div class="synopsis">
              <p>简介</p>
              <img
                src="http://static.wyikao.com/upload/0/yzl/common/2020040200/e3518cfa88b3b8c9a3c3b64ee15fc587.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div v-show="bShow"><h1>暂无详情</h1></div>
      <div v-show="cShow"><h1>暂无详情</h1></div>
    </div>
    <div class="btn-warp">
      <button class="zx" @click="open">
        <p><img src="../../assets/img/details/call.png" alt="" /></p>
        <span>在线咨询</span>
      </button>
      <button class="bm" @click="loginFun">
        <span>￥{{ form.price }}</span>
        <span>立即报名</span>
      </button>
    </div>
  </div>
</template>

<script>
import "../../css/details/index.css";
import { mapGetters } from "vuex";
// import Open from "./Open";
export default {
  data() {
    return {
      aShow: true,
      bShow: false,
      cShow: false,
      form: {},
    };
  },
  mounted() {
    this.form = this.$route.params.form;
    // console.log(this.form);
    // console.log(this.user);
  },
  methods: {
    loginFun() {
      if (this.user.id) {
        this.$router.push({
          name: "Order",
          params: {
            form: this.$route.params.form,
            uid: this.user.id,
          },
        });
      } else {
        this.$router.push("/login");
      }
    },
    onClickLeft() {
      this.$router.push("/");
    },
    aShowFun() {
      this.aShow = true;
      this.bShow = false;
      this.cShow = false;
    },
    bShowFun() {
      this.aShow = false;
      this.bShow = true;
      this.cShow = false;
    },
    cShowFun() {
      this.aShow = false;
      this.bShow = false;
      this.cShow = true;
    },
    //// 在线咨询
    open() {
      window.open("./Open");
    },
  },
  computed: {
    ...mapGetters(["user"]),
  },
};
</script>

<style scoped></style>
